import { Layout, Menu, Dropdown, Avatar, Button } from 'antd';
import {
  DashboardOutlined,
  FormOutlined,
  CopyOutlined,
  TagOutlined,
  SnippetsOutlined,
  BookOutlined,
  StarOutlined,
  MessageOutlined,
  MailOutlined,
  FolderOpenOutlined,
  SearchOutlined,
  ProjectOutlined,
  UserOutlined,
  SettingOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  GithubFilled,
  PlusOutlined,
} from '@ant-design/icons';
import { useState } from 'react';
import './index.less';
import { Link } from 'umi';
const { Header, Content, Sider } = Layout;
const { SubMenu } = Menu;
import { IRouteComponentProps } from 'umi';
import React from 'react';
const list = [
  {
    path: '/',
    title: '工作台',
    commponent: DashboardOutlined,
  },
  {
    title: '文章管理',
    commponent: FormOutlined,
    child: [
      {
        path: '/article',
        title: '所有文章',
        commponent: FormOutlined,
      },
      {
        path: '/article/category',
        title: '分类管理',
        commponent: CopyOutlined,
      },
      {
        path: '/article/tags',
        title: '标签管理',
        commponent: TagOutlined,
      },
    ],
  },
  {
    path: '/page',
    title: '页面管理',
    commponent: SnippetsOutlined,
  },
  {
    path: '/knowledge',
    title: '知识小册',
    commponent: BookOutlined,
  },
  {
    path: '/poster',
    title: '海报管理',
    commponent: StarOutlined,
  },
  {
    path: '/comment',
    title: '评论管理',
    commponent: MessageOutlined,
  },
  {
    path: '/mail',
    title: '邮件管理',
    commponent: MailOutlined,
  },
  {
    path: '/file',
    title: '文件管理',
    commponent: FolderOpenOutlined,
  },
  {
    path: '/search',
    title: '搜素记录',
    commponent: SearchOutlined,
  },
  {
    path: '/view',
    title: '访问统计',
    commponent: ProjectOutlined,
  },
  {
    path: '/user',
    title: '用户管理',
    commponent: UserOutlined,
  },
  {
    path: '/setting',
    title: '系统设置',
    commponent: SettingOutlined,
  },
];
const whiteList = [
  '/',
  '/article',
  '/article/category',
  '/article/tags',
  '/page',
  '/knowledge',
  '/poster',
  '/comment',
  '/mail',
  '/file',
  '/search',
  '/view',
  '/user',
  '/setting',
  '/ownspace',
];
export default function GlobalLayout({
  children,
  location,
}: IRouteComponentProps) {
  let body = children;
  if (whiteList.indexOf(location.pathname) !== -1) {
    body = <div className="container content">{children}</div>;
  }
  const [collapsed, setCollapsed] = useState(false);
  const onCollapse = (collapsed: boolean) => {
    setCollapsed(!collapsed);
  };
  const menulist = [
    {
      path: '/ownspace',
      title: '个人中心',
    },
    {
      path: '/user',
      title: '用户管理',
    },
    {
      path: '/setting',
      title: '系统设置',
    },
  ];
  const menus = [
    {
      path: '/article/amEditor',
      title: '新建文章-协同编辑器',
    },
    {
      path: '/article/editor',
      title: '新建文章',
    },
    {
      path: '/page/editor',
      title: '新建页面',
    },
  ];

  const menu = (
    <Menu>
      {menulist.map((item, index) => {
        return (
          <Menu.Item key={index} className="menu-item">
            <Link to={item.path}>{item.title}</Link>
          </Menu.Item>
        );
      })}
      <Menu.Item className="menu-item">
        <Link
          to="/login"
          onClick={() => {
            cleanToken();
          }}
        >
          退出登录
        </Link>
      </Menu.Item>
    </Menu>
  );
  const menusList = (
    <Menu>
      {menus.map((item, index) => {
        return (
          <Menu.Item key={index} className="menus-items">
            <Link to={item.path}>{item.title}</Link>
          </Menu.Item>
        );
      })}
    </Menu>
  );
  function cleanToken() {
    localStorage.clear();
  }
  const user = JSON.parse(localStorage.getItem('user')!);
  let flag = whiteList.includes(location.pathname);
  return flag ? (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider collapsible collapsed={collapsed} trigger={null}>
        <div className="logo">
          <img
            src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-20/wipi-favicon.png"
            alt=""
          />
          <span style={{ marginLeft: '4px', fontSize: '19px' }}>管理后台</span>
        </div>
        <div className="newly_build">
          <Dropdown overlay={menusList} placement="bottomLeft">
            <Button type="primary">
              <PlusOutlined /> 新建
            </Button>
          </Dropdown>
        </div>
        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
          {list.map((item, index) => {
            return item.child ? (
              <SubMenu
                key={index}
                icon={<item.commponent />}
                title={item.title}
              >
                {item.child.map((v) => {
                  return (
                    <Menu.Item key={v.title} icon={<v.commponent />}>
                      <Link to={v.path}>{v.title}</Link>
                    </Menu.Item>
                  );
                })}
              </SubMenu>
            ) : (
              <Menu.Item key={index} icon={<item.commponent />}>
                <Link to={item.path}>{item.title}</Link>
              </Menu.Item>
            );
          })}
        </Menu>
      </Sider>
      <Layout className="site-layout">
        <Header className="site-layout-background" style={{ padding: 0 }}>
          <div className="header-ant-col header-ant-col-12">
            {React.createElement(
              collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
              {
                className: 'trigger',
                onClick: () => {
                  onCollapse(collapsed);
                },
              },
            )}
          </div>
          <div
            className="header-ant-col header-ant-col-12"
            style={{ textAlign: 'right' }}
          >
            <div className="head-right" style={{ padding: 15 }}>
              <a
                href="https://github.com/fantasticit/wipi"
                className="head-right-gitthub"
              >
                <GithubFilled />
              </a>
              <div style={{ padding: 0 }}>
                <Dropdown overlay={menu}>
                  <div>
                    {user && user.avatar ? (
                      <Avatar src={user.avatar} />
                    ) : (
                      <Avatar icon={<UserOutlined />} />
                    )}
                    {user ? (
                      <span style={{ marginLeft: 8 }}>Hi, {user.name}</span>
                    ) : null}
                  </div>
                </Dropdown>
              </div>
            </div>
          </div>
        </Header>
        <Content>{body}</Content>
      </Layout>
    </Layout>
  ) : (
    <div className="container content">{children}</div>
  );
}
